<template>
    <div class='wrap'>
        <v-header :userName="userNameHeader"></v-header>
        <div class='detail'>
            <section @click.stop='back' class="return" style='display:inline-block'><a>返回上层</a></section>
            <section @click.stop='cancelLeave' v-if="isShowCancel" class="return" style='display:inline-block'><a>撤销申请</a></section>
            <section v-if='xiaojiaVisible' @click.stop='goToXiaojia' class="return" style='margin-left:6px;display:inline-block'><a>我要销假</a></section>
            <section v-if='isShowRelate' @click.stop='goOther' class="return" style='display:inline-block'><a>查看该流程{{isLeaveOrXiao(this.res.executeType) =='请'?'销':'请'}}假申请</a></section>

            <section class="view">
                <div class="header">
                    <span :class="{xiaojia:res.executeType == 3 || res.executeType == 4}">{{res.executeType | handleTitle}}</span>
                    <span>{{wfBusinessProcessData.emplname}}的{{res.executeType | handleTitle}}假申请</span>
                    <span class="right last">{{res.id}}</span>
                    <span class="right">审批编号</span>
                </div>
                <div class="content">
                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4"}' class='color-one'>{{res.executeType | handleTitle}}假类型</span>
                        <span>{{wfBusinessProcessData.processTypeName}}
                            <el-tooltip
                                v-for='(k) in aTypeSelect'
                                v-if='k.name == wfBusinessProcessData.processTypeName'
                                :content='k.content'
                                :key="k.confId"
                                popper-class='tooltip-300'
                            >
                                <i class="wenhao">?</i>
                            </el-tooltip>
                        </span>
                    </div>
                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>{{res.executeType=="3" || res.executeType=="4" ?"实际":""}}开始时间</span>
                        <!-- <span>{{wfBusinessProcessData.startTime | handleDisplayDate}}</span> -->
                        <span>{{(res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeStartTime : wfBusinessProcessData.startTime) | handleDisplayDate}}</span>
                        <span class='color-one'>{{(res.executeType=="3" || res.executeType=="4" ?wfBusinessProcessData.effeStartTimeHalfDaySign : wfBusinessProcessData.startTimeHalfDaySign) | ampm}}</span>
                    </div>
                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>{{res.executeType=="3" || res.executeType=="4" ?"实际":""}}结束时间</span>
                        <!-- <span>{{wfBusinessProcessData.endTime | handleDisplayDate}}</span> -->
                        <span>{{(res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeEndTime : wfBusinessProcessData.endTime) | handleDisplayDate}}</span>
                        <!-- <span class='color-one'>{{wfBusinessProcessData.endTimeHalfDaySign | ampm}}</span> -->
                        <span class='color-one'>{{(res.executeType=="3" || res.executeType=="4" ?wfBusinessProcessData.effeEndTimeHalfDaySign : wfBusinessProcessData.endTimeHalfDaySign) | ampm}}</span>
                    </div>
                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>{{res.executeType | handleTitle}}假天数</span>
                        <!-- <span>{{wfBusinessProcessData.leaveDay}} 天</span> -->
                        <span>{{ res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.effeLeaveDay : wfBusinessProcessData.leaveDay}}</span>天{{ res.executeType=="3" || res.executeType=="4" ? wfBusinessProcessData.showSickWorkingData : wfBusinessProcessData.showWorkingData}}</span>
                    </div>
            <div >
                <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one floatReasonTitle'>{{res.executeType | handleTitle}}假事由</span>
                <span class="reasonTitle">{{handleLeaveReason(res.executeType)}}</span>
            </div>
                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>当前步骤</span>
                        <span :class="handleColorDis(res.status)">{{handleStatus(res.status)}}</span>
                    </div>
                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one' style='margin-right:2px'>知会人&nbsp;&nbsp;&nbsp;</span>
                        <span v-if='zhihuiren.length>0'>{{zhihuiren.join(' , ')}}</span><span v-else>无</span>
                    </div>

                    <div>
                        <span :class='{"span-width":res.executeType=="3" || res.executeType=="4" }' class='color-one'>附件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <div class="fileContainer">
                            <div class="imgContainer" v-if='imgList.length'>
                                <template v-for="(k,index) in imgList">
                                    <img max-width="100px" @click="showLightBox(index)" :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.annexId+"&token="+token' alt="" />
                                </template>
                            </div>
                        
                            <a style='margin-left: 12px;' v-if='fileList.length'>
                                <a 
                                :href='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.annexId+"&token="+token'
                                style='display:block' 
                                class='color-third'
                                v-for='(k,i) in fileList'
                                >
                                    <i :class="handleFileType(k.fileName)"></i>
                                    <span>{{k.fileName}}</span>
                                </a>
                            </a>
                        </div>
                        <p style='margin-left:14px' v-if='fileList.length === 0 && imgList.length === 0'>无</p>
                    </div>    
                </div>

                <section class="steps">
                    <div v-for='(k,i) in LogList'  class='steps-list'>


                        <!-- <template>
                            <div class="date">{{k.excuteTime | handleDateToSeconds}}</div>

                            <div class="xian" :class='{ last:i == LogList.length - 1 }'>
                                <span class="el-icon-circle-check" :class='{ok:k.status == 1 || k.status == 5 || k.status == 7 || k.status == 3}'></span>
                            
                            </div>
                            <div class="people">
                                <span>{{k.status == 5 ?  k.oldAssigneeName  : k.assigneeName }}</span>
                                <span class="color-one">({{k.deptDescr}})</span>   
                            </div> 

                            <div class="buzhou" :class='handleColor(k.status)'>{{k.status | alterStatusTitle}}
                            </div>
                            <p class='message'>
                                {{k.status == 5 ? '' : k.applyComment }}
                            </p>
                        </template> -->

                        <div class="date">{{k.excuteTime | handleDateToSeconds}}</div>

                        <div class="xian" :class='{ last:i == LogList.length - 1 }'>
                            <span class="el-icon-circle-check" :class='{ok:k.status == 1 || k.status == 5 || k.status == 7 || k.status == 3}'></span>
                        
                        </div>
                        <div class="people">
                            <span>{{k.status == 5 ?  k.oldAssigneeName  : k.assigneeName }}</span>
                            <span class="color-one">({{k.deptDescr}})</span>   
                            <div style="margin-top:4px;" v-if="k.wfSubProcessNodes && k.wfSubProcessNodes.length" v-for="q in k.wfSubProcessNodes">
                                <span class="name">{{q.assigneeName}}</span>
                                <span class="dept color-one">({{q.deptDescr}})</span>
                                <!-- <span class="checking" style="margin-right: -114px;float:right;">{{q.statusShow ? q.statusShow: q.status | alterStatusTitle}}{{q.statusShow ? '':'(代理)'}}</span>     
                                <span class="commentApply" >{{q.status == 5 ? '' : q.applyComment }}</span>                                -->
                            </div>
                        </div> 

                        <div class="buzhou" :class='handleColor(k.status)'>
                            <div style="min-height:20px;">{{(k.statusShow  ? k.statusShow : k.status) | alterStatusTitle}}</div>
                            <div style="margin-top:4px;" v-if="k.wfSubProcessNodes && k.wfSubProcessNodes.length" v-for="q in k.wfSubProcessNodes">   
                                <span class="checking" >{{q.statusShow ? q.statusShow: q.status | alterStatusTitle}}{{q.statusShow ? '':'(代理)'}}</span>                                
                            </div>     
                        </div>
                        <div class='message'>
                            <div style="min-height:20px;">
                                {{k.status == 5 ? '' : k.applyComment }}
                            </div>
                            <div style="margin-top:4px;" v-if="k.wfSubProcessNodes && k.wfSubProcessNodes.length" v-for="q in k.wfSubProcessNodes">   
                                <span  >{{q.status == 5 ? '' : q.applyComment }}</span>                               
                            </div>                            
                        </div>


                    </div> 
                </section>
            </section>

        </div>
        <light-box :selected.sync="selected" ref="lightBox" :imgUrlList="imgUrlList" :visiblable.sync="visiblable"></light-box>
    </div>
</template>

<script>
import Vue from 'vue';
import { Message, MessageBox, Tooltip, Dialog } from 'element-ui';
import header from '@/components/employee/header';

Vue.use(Tooltip);
Vue.use(Dialog);

import lightBox from '@/components/employee/requestVacation/lightBox';

export default {
  components: {
    'v-header': header,
    'light-box': lightBox
  },
  computed: {
      buttonFlag() {
          if (this.status == 1) {
              return false;
          }
          return true;
      },

  },
  directives: {

  },
  created() {
      let queryData;
      if (typeof this.$route.query.id === 'string') {
          queryData = this.$route.query.id;

      } else {
          queryData = window.location.href.split('?')[1];
      }
      this.params = {
          subProcessId: queryData
      };
      this.token = localStorage.getItem('token');
  },
  mounted() {

    this.Axios
        .Post(this.URL.examineBydetails.url, this.params)
        .then(res => {
            this.res = res.data.datas;
            this.wfBusinessProcessData = this.res.wfBusinessProcessData;
            
            //显示撤销按钮
            this.isShowCancel = this.res.readTime ? false : true;
            
            if (this.isLeaveOrXiao(this.res.executeType) == '请') {
                var relate_id = this.res.wfMainProcess.endSubProcessId;
                this.isShowRelate = relate_id ? true : false; //显示关联请销假记录按钮
                this.xiaojiaVisible = this.res.wfMainProcess.executeSubProcessKey !== this.res.wfMainProcess.startSubProcessKey && !relate_id ? true : false; //显示是否可以发起销假按钮
                this.relate_id = relate_id
            } else {
                var relate_id = this.res.wfMainProcess.startSubProcessId;
                this.isShowRelate = relate_id ? true : false; //显示关联请销假记录按钮
                this.relate_id = relate_id;
            }
            

            this.res.sponsorNodes[0].status = 5; //自定义status 为5
            if (this.res.recordNodes && this.res.recordNodes.length) {
                if (this.res.recordNodes[0].status == 2){
                    this.res.recordNodes[0].status = 6;
                } else if (this.res.recordNodes[0].status == 1){
                    this.res.recordNodes[0].status = 7;
                } else if (this.res.recordNodes[0].status == 3){
                    this.res.recordNodes[0].status = 3;
                }else {
                    this.res.recordNodes[0].status = 8;
                }
            }

            var resultList = this.res.annexNexus;
            resultList.forEach((val, index, arr) => {
                if (this.handleFileType(val.fileName) === 'img') {
                    this.imgList.push(val);
                    this.imgUrlList.push(
                      this.Axios.baseURI +
                        '/' +
                        this.URL.downloadFile.url +
                        '?id=' +
                        val.annexId +
                        '&token=' +
                        this.token
                    );
                } else {
                    this.fileList.push(val);
                }
            });

            this.LogList = this.res.sponsorNodes.concat(this.res.approvalNodes,this.res.recordNodes || []);
            
            this.res.copySends.forEach((ele, index, arr)=>{
                this.zhihuiren.push(ele.toEmplName)
            })   
        });

    this.getVacationDetail();
  },
  data() {
      return {
          active: 2,
          type: null,
          status: null,
          detailData: null,
          textarea: null,
          fileList: [],
          token: null,
          params: null,
          userNameHeader: localStorage.getItem('userName'),
          LogList: [],
          selected: 0,
          visiblable: false,
          imgList: [],
          imgUrlList: [],
          aTypeSelect: [],

          zhihuiren: [],
          xiaojiaVisible: false,
          res:{},
          wfBusinessProcessData:{},
          isShowRelate:false,

          relate_id:'',
          isShowCancel:false,
      };
  },
  filters: {
      ampm: function(value) {
          if (value == '1') {
              return '上午';
          } else if (value == '2') {
              return '下午';
          }
      },
      handleTitle:function(val){
          return val == '1' || val == '2' ? '请' :  '销' ;
      },
      handleDisplayDate: function(val){
          if (val) {
                if (typeof val === 'string' && val.split(' ').length>1) {
                    return val.split(' ')[0]
                }
              var dataObj = new Date(val);   
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              return year + "-" + month + "-" + day 
          } else {
              return ''
          }
      },
      handleDateToSeconds:function(time){
          if (time) {
                var dataObj
                if (typeof time === 'string' && time.split(' ').length>1) {
                    dataObj = new Date(Date.parse(time.replace(/-/g,"/")))
                } else {
                    dataObj = new Date(time)
                }
              var year = dataObj.getFullYear();
              var month = dataObj.getMonth() + 1;
              month = month > 9 ? month : '0' + month;
              var day = dataObj.getDate();
              day = day > 9 ? day : '0' + day;
              var hours = dataObj.getHours();
              hours = hours > 9 ? hours : '0' + hours;
              var minutes = dataObj.getMinutes();
              minutes = minutes > 9 ? minutes : '0' + minutes;
              var seconds = dataObj.getSeconds();
              seconds = seconds > 9 ? seconds : '0' + seconds;
              return year + "-" + month + "-" + day + '   '  + hours + ':' + minutes + ':' + seconds;
          } else {
              return ''
          }        
      },
    alterStatusTitle:function(strNum){
      console.log(strNum,'strNum');
        if (typeof strNum === 'string') {
            return strNum;
        } 
        switch (strNum) {
            case 0 : 
                return '待审批'
                break;                  
            case 1 :
                return '已审批'
                break;
            case 2 :
                return '审批中'
                break;
            case 3:
                return '已拒绝'
                break;
            case 4:
                return ''
                break;
            case 5: //自定义status 5 后台不返回
                return '我发起'
                break;
            case 6 :
                return '备案中'
                break;
            case 7 :
                return '已备案'
                break;
            case 8 :
                return '待备案'
                break;
            case 9 :
                return '待审批'
                break;

        }
    },
  },

  methods: {


        handleStatus:function(status){
            switch (status) {
                case 0 : 
                    return '已拒绝'
                    break;                  
                case 1 :
                    return '已备案'
                    break;
                case 2 :
                    return '审批中'
                    break;
                case 3 :
                    return '已撤销'
                    break;
            }
        },
        handleColorDis:function(str){
            switch (str) {
                case 1:
                    return 'pass';
                    break;
                case '已备案':
                    return 'pass';
                    break;
                case 0:
                    return 'nook';
                    break;
                case 3:
                    return 'nook';
                    break;
                default:
                    return 'checking';
                    break;
            }
        },

      cancelLeave(){
        var params = {
            subProcessId: this.params.subProcessId,
        };
        this.Axios
            .Post(this.URL.executeCancel.url,params)
            .then(res => {
                if (res.data.status == 1) {
                    Message({
                    type: 'success',
                    message: '撤销申请成功'
                    });
                    window.location.reload();
                }
            });        
      },

      isLeaveOrXiao:function(val){
          return val == '1' || val == '2'? '请' : '销' ;
      },

      goOther() {
          window.open('#/requestVacation/t3detail?' + this.relate_id);
      },

    handleLeaveReason(excuteType){
        if (excuteType == 1 || excuteType == 2) {
            return this.res.wfBusinessProcessData.leaveReason 
        } else if (excuteType == 3 || excuteType == 4) {
            return this.res.wfBusinessProcessData.sickLeaveReason
        }
        
    },

      goToXiaojia() {
          let id = this.res.wfMainProcess.id;
          var name  = '';
          if (this.res.executeType =="2" || this.res.executeType=="4") {
               name= this.wfBusinessProcessData.emplname;
          }
          localStorage.setItem('twoProcessId', JSON.stringify({
              "wfMainId":id,
              "subId":this.params.subProcessId,
              'name':name
          }));
          
          this.$router.push({ path: '/myBackout' });
      },
      showLightBox(index) {
          this.visiblable = false;
          if (!index) {
              Vue.nextTick(() => {
                  this.visiblable = true;
              });
          }
            this.selected = index;

            Vue.nextTick(()=>{
                this.$refs.lightBox.showPic();
            })
      },

      handleColor(str) {
          switch (str) {
              case 1:
                return 'pass';
                break;
              case '已备案':
                return 'pass';
                break;
              case '已同意':
                return 'pass';
                break;
              case 3:
                return 'nook';
                break;
              default:
                return 'checking';
                break;
          }
      },

      handleFileType(name) {
        //   let type = name && name.split('.')[1];
      var lastIndex = name.lastIndexOf('.');
      var type = name.substring(lastIndex + 1).trim();
          if (
              type == 'jpg' ||
              type == 'jpeg' ||
              type == 'png' ||
              type == 'svg' ||
              type == 'gif' ||
              type == 'bmp'
          ) {
              return 'img';
          } else if (type == 'doc' || type == 'docx') {
              return 'word';
          } else if (type == 'pdf') {
              return 'pdf';
          }else if (type == 'xls' || type == 'xlsx') {
              return 'excel';
          } else {
              return 'file';
          }
      },
      back() {
          this.$router.push({
              path: '/requestVacation',
              query: { activeName: 'c' }
          });
      },

      gotoRouter() {
          setTimeout(() => {
            this.$router.push({
                path: '/requestVacation',
                query: { activeName: 'b' }
            });
          }, 2000);
      },

      getVacationDetail() {
          this.Axios.Post(this.URL.getLeaveInstruction.url,{'subProcessId':this.params.subProcessId}).then(res => {
              let datas = res.data.datas;
              this.aTypeSelect = datas;
          });
      }
  }
};
</script>

<style lang='less' scoped>
.pass {
  color: #339966;
}
.xiaojia {
  background-color: #75d155 !important;
  color:#fff !important;
}
.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.commentApply{
    word-wrap: break-word;
    margin-right: -378px;
    float: right;
    display: inline-block;
    max-width: 400px;
}

.wrap {
  height: 100vh;
  overflow-x: hidden;
  background-color: rgb(236, 240, 245);
}
.reason {
  span {
    float: left;
  }
  span:last-of-type {
    max-width: 90%;
    white-space: wrap;
    overflow: hidden;
    word-wrap: break-word;
  }
}
.reasonTitle{
   @diff : 120px;
   display:inline-block;
    word-wrap: break-word;
   width:calc(~'100% - '@diff);
}
.floatReasonTitle{
    float:left;
}

.detail {
  width: 80%;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 50px;

  .color-one {
    color: #999;
  }
  .color-two {
    color: #38f;
  }
  .color-third {
    color: #3c8dbc;
  }
  .return {
    color: #38f;
    cursor: pointer;
    border: 1px solid #38f;
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
  }

  .return.select {
    color: #fff !important;
    background-color: #38f !important;
  }

  .view {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    .header {
      background-color: #3c8dbc;
      padding: 10px 10px 8px 20px;
      font-size: 15px;
      line-height: 24px;
      overflow: hidden;
      > span {
        color: #fff;
        margin-left: 10px;
      }
      > span:first-of-type {
        margin-left: 0;
        color: #38f;
        background-color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
      }
      > span.right {
        float: right;
      }
      > span.right.last {
        position: relative;
      }
    }

    .content {
      padding: 16px 58px 40px 58px;
      position: relative;
      .span-width {
        width: 90px;
        display: inline-block;
      }
      a {
        cursor: pointer;
        span {
          position: relative;
          top: -4px;
        }
      }

      .word,
      .excel,
      .img,
      .pdf,
      .file {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/ 100% 100%;
        margin: 0 8px 0 2px;
      }

      .word {
        background-image: url(../../../../static/images/word.svg);
      }
      .pdf {
        background-image: url('../../../../static/images/pdf.svg');
      }
      .excel {
        background-image: url(../../../../static/images/excel.svg);
      }

      .img {
        background-image: url(../../../../static/images/img.svg);
      }

      .file {
        background-image: url(../../../../static/images/file.svg);
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: #ecf0f5;
        height: 1px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
      }

      & > div {
        margin: 6px 0;
        i.wenhao {
          font-style: normal;
          background-color: #89abc6;
          color: #fff;
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          margin-left: 3px;
          font-size: 12px;
          cursor: pointer;
        }

        & > span:nth-of-type(n + 2) {
          margin-left: 14px;
        }
      }

      & > div:last-of-type {
        overflow: hidden;
        & > p {
          float: left;
          margin-bottom: 4px;
        }

        & > a {
          float: left;
        }

        & > span {
          float: left;
        }
      }
    }

    .steps {
      padding: 0px 0 20px 16px;
      .steps-list {
        min-height:60px;
        position: relative;
        & > div,
        & > p {
          display: inline-block;
          vertical-align: top;
        }

        .date {
          width: 15%;
        }

        .people {
          margin-left:4%;
          width: 30%;
        }

        .message {
          word-wrap: break-word;
          white-space: wrap;
          max-width: 400px;
          padding-bottom: 20px;
        }

        .buzhou {
          margin-left: 30px;
          width: 8%;
          line-height:20px;
        }
        .pass {
          color: #339966;
        }

        .nook {
          color: #c7254e;
        }

        .checking {
          color: #38f;
        }

        .xian {
          position: absolute;
          bottom: 0;
          top: 0;
          left:16%;
          border-right: 1px dashed #999;
          width: 1px;
          min-height: 60px;
          > span {
            transform: translateX(-50%) translateY(2px) scale(1.3);
            background-color: #fff;
            color: #999;
          }
          > span.ok {
            color: #38f;
          }
        }

        .xian.last {
          height: 0;
          min-height: 0;
          & > span {
            top: 4px;
          }
        }
      }
    }

    .deside {
      margin: 60px 0px 20px 10px;
      text-align: left;
      > a {
        color: #38f;
        cursor: pointer;
        border: 1px solid #38f;
        padding: 6px 15px;
        border-radius: 15px;
        margin: 0 2px;
      }
    }
  }

  .text-area {
    width: 60%;
    margin: 30px 12px;
    .submit {
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
</style>

<style lang='less'>
body .tooltip-300 {
  max-width: 300px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}

.imgContainer img {
  display: inline-block;
  margin-right:14px;
  max-height: 80px;
  cursor: pointer;
}
.fileContainer{
    margin-left: 14px;
    overflow:hidden;
    clear:both;
    display:inline-block;
    width:80%;
}
.fileContainer>a>a{
    margin-top:4px;
}
</style>
